<template>
  <a-card :bodyStyle="{ padding: '0 24px' }" :bordered="false">
    <a-tabs v-model="actKey" @change="callback">
      <a-tab-pane key="1" :tab="$t('基本信息')" style="margin: 20px 0 50px 50px;">
        <div style="display: flex; padding: 14px 0">
          <div style="width: 140px; font-weight: bold; color: #000">{{ $t('会员信息采集') }}</div>
          <a-row :gutter="[0, 24]" style="width: calc(100% - 140px)">
            <a-col :span="24">
              <a-checkbox :checked="model.status == 1" @change="(e) => changeSet(e, 'status')">{{ $t('启用') }}</a-checkbox>
              <span style="margin-left: 15px; color: orange">{{
                $t('（开启后会员APP注册后会进入会员信息设置页面，客户可按序逐一设置个人资料）')
              }}</span>
            </a-col>
          </a-row>
        </div>
        <div style="display: flex; padding: 14px 0">
          <div style="width: 140px; line-height: 32px; font-weight: bold; color: #000">{{ $t('必填项') }}</div>
          <a-row :gutter="[0, 24]" style="width: calc(100% - 140px)">
            <a-col :span="24">
              <span style="color: orange">{{
                $t('（勾选的选项会员注册APP时必须输入）')
              }}</span>
            </a-col>
            <a-col :span="24">
              <a-checkbox :disabled="model.status == 0" :checked="model.name == 1" @change="(e) => changeSet(e, 'name')">{{ $t('姓名') }}</a-checkbox>
            </a-col>
            <a-col :span="24">
              <a-checkbox :disabled="model.status == 0" :checked="model.sex == 1" @change="(e) => changeSet(e, 'sex')">{{ $t('性别') }}</a-checkbox>
            </a-col>
            <a-col :span="24">
              <a-checkbox :disabled="model.status == 0" :checked="model.certno == 1" @change="(e) => changeSet(e, 'certno')">{{ $t('证件号') }}</a-checkbox>
            </a-col>
            <a-col :span="24">
              <a-checkbox :disabled="model.status == 0" :checked="model.birthday == 1" @change="(e) => changeSet(e, 'birthday')">{{ $t('生日') }}</a-checkbox>
            </a-col>
            <a-col :span="24">
              <a-checkbox :disabled="model.status == 0" :checked="model.phone == 1" @change="(e) => changeSet(e, 'phone')">{{ $t('手机号码') }}</a-checkbox>
            </a-col>
            <a-col :span="24">
              <a-checkbox :disabled="model.status == 0" :checked="model.email == 1" @change="(e) => changeSet(e, 'email')">{{ $t('电子邮箱') }}</a-checkbox>
            </a-col>
            <a-col :span="24">
              <a-checkbox :disabled="model.status == 0" :checked="model.country == 1" @change="(e) => changeSet(e, 'country')">{{ $t('居住国家') }}</a-checkbox>
            </a-col>
            <a-col :span="24">
              <a-checkbox :disabled="model.status == 0" :checked="model.city == 1" @change="(e) => changeSet(e, 'city')">{{ $t('居住城市') }}</a-checkbox>
            </a-col>
            <a-col :span="24">
              <a-checkbox :disabled="model.status == 0" :checked="model.address == 1" @change="(e) => changeSet(e, 'address')">{{ $t('居住地址') }}</a-checkbox>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" :tab="$t('获知渠道')" force-render style="margin: 20px 0 50px 0;">
        <div style="display: flex; padding: 14px 0">
          <a-row :gutter="[0, 24]" style="width: calc(100% - 140px)">
            <a-col :span="24">
              <a-checkbox :disabled="model.status == 0" :checked="model.channelStatus == 1" @change="(e) => changeSet(e, 'channelStatus')">{{ $t('获知渠道必填') }}</a-checkbox>
              <span style="margin-left: 15px; color: orange">{{
                $t('（启用后会员注册APP后获知渠道必须选一项）')
              }}</span>
            </a-col>
          </a-row>
        </div>
        <div style="margin: 10px 0">
          <a-button type="primary" @click="addItem(0)">{{$t('新增')}}</a-button>
        </div>
        <a-table
          :columns="channelColumns"
          :dataSource="channelList"
          size="middle"
          bordered
          :pagination="false"
          style="margin-right: 100px"
        >
          <template slot="actions" slot-scope="text, record">
            <a @click="editItem(record)">{{ $t('编辑') }}</a>
            <a-divider type="vertical"/>
            <a-popconfirm :title="$t('确定删除吗?')" @confirm="() => deleteItem(record.id, 0)"> <a>{{$t('删除')}}</a> </a-popconfirm>
          </template>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="3" :tab="$t('个人喜好')" force-render style="margin: 20px 0 50px 0;">
        <div style="display: flex; padding: 14px 0">
          <a-row :gutter="[0, 24]" style="width: calc(100% - 140px)">
            <a-col :span="24">
              <a-checkbox :disabled="model.status == 0" :checked="model.hobbyStatus == 1" @change="(e) => changeSet(e, 'hobbyStatus')">{{ $t('个人喜好必填') }}</a-checkbox>
              <span style="margin-left: 15px; color: orange">{{
                $t('（启用后会员注册APP后个人喜好必须选一项）')
              }}</span>
            </a-col>
          </a-row>
        </div>
        <div style="margin: 10px 0">
          <a-button type="primary" @click="addItem(1)">{{$t('新增')}}</a-button>
        </div>
        <a-table
          :columns="channelColumns"
          :dataSource="hobbyList"
          size="middle"
          bordered
          :pagination="false"
          style="margin-right: 100px"
        >
          <template slot="actions" slot-scope="text, record">
            <a @click="editItem(record)">{{ $t('编辑') }}</a>
            <a-divider type="vertical"/>
            <a-popconfirm :title="$t('确定删除吗?')" @confirm="() => deleteItem(record.id, 1)"> <a>{{$t('删除')}}</a> </a-popconfirm>
          </template>
        </a-table>
      </a-tab-pane>
    </a-tabs>
    
    <profile-item-modal ref="modalForm" @ok="modalFormOk"></profile-item-modal>
  </a-card>
</template>

<script>
import Vue from 'vue'
import moment from 'moment'
import { getAction, httpAction, putAction, deleteAction } from '@/api/manage'
import { cronChangeDate, dateChangeCron } from '@/utils/cronDate'
import ProfileItemModal from './modules/ProfileItemModal'
  
export default {
  name: 'MemberProfileSet',
  components: {
    ProfileItemModal
  },
  data() {
    return {
      description: '会员信息管理',
      actKey: '1',
      model: {
        status: 0
      },
      channelColumns: [
        {
          title: this.$t('名称'),
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: this.$t('说明'),
          align: 'center',
          dataIndex: 'description',
        },
        {
          title: this.$t('操作'),
          align: 'center',
          dataIndex: 'actions',
          scopedSlots: { customRender: 'actions' },
        },
      ],
      channelList: [],
      hobbyList: [],
      url: {
        list: '/applet/bisMemberProfileSet/list',
        add: '/applet/bisMemberProfileSet/add',
        edit: '/applet/bisMemberProfileSet/edit',
      },
    }
  },
  created() {
    this.getSet();
    this.getItem(0);
    this.getItem(1);
  },
  methods: {
    callback(e) {
      this.actKey = e
    },
    getSet() {
      getAction(this.url.list).then((res) => {
        if (res.success) {
          if (res.result.records.length > 0) {
            this.model = res.result.records[0]
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    changeSet(e, key){
      this.$set(this["model"], key, e.target.checked ? 1 : 0)
      let url = ''
      let method = ''
      if (this.model.id) {
        url = this.url.edit
        method = 'put'
      } else {
        url = this.url.add
        method = 'post'
      }
      httpAction(url, this.model, method).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.getSet()
        } else {
          this.$message.warning(res.message)
        } 
      })
    },
    getChannel() {
      getAction(this.url.list).then((res) => {
        if (res.success) {
          if (res.result.records.length > 0) {
            this.model = res.result.records[0]
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    getItem(type) {
      getAction("/applet/bisMemberProfileItem/list", {type : type, pageSize : 999}).then((res) => {
        if (res.success) {
          if (res.result.records.length > 0) {
            if(type == 0){
              this.channelList = res.result.records
            } 
            if(type == 1){
              this.hobbyList = res.result.records
            }
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    modalFormOk(type) {
      this.getItem(type)
    },
    addItem(type) {
      this.$refs.modalForm.add(type)
      this.$refs.modalForm.title = this.$t('新增')
    },
    editItem(record) {
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = this.$t('编辑')
    },
    deleteItem(id, type) {
      let that = this
      deleteAction("/applet/bisMemberProfileItem/delete", { id: id }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.getItem(type)
        } else {
          that.$message.warning(res.message)
        }
      })
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>